<!-- 友情链接 -->
<template>
	<div class="flex c2">
		<p>标题：</p>
		<el-input v-model="element.name" placeholder="请输入" clearable/>
	</div>
	<div class="flex c2">
		<p>链接：</p>
		<el-input v-model="element.url" placeholder="请输入" clearable/>
	</div>
	<div class="flex c2">
		<p style="width:100px;">跳转方式：</p>
		<el-select v-model="element.mode" placeholder="请选择">
			<el-option label="当前窗口打开" value="default"></el-option>
			<el-option label="新窗口打开" value="_blank"></el-option>
		</el-select>
	</div>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {
		config,
		defaultImg
	} = publicJS();
	const emit = defineEmits(["selectImg"]); //自定义事件
	const props = defineProps({
		element: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const formData = {
		name:'',
		url:'',
		mode:'',//页面或连接 打开方式
		show:true,
	}
	
	//暴露方法给父组件 通过ref.value调用
	defineExpose({
		formData
	})
</script>

<style scoped lang="scss">
	.c1 {
		margin-right: 20px;
		cursor: pointer;
		width: 40px;
		height: 40px

	}

	.c1 .el-image {
		border: 1px solid #eee;
		width: 40px;
		height: 40px
		// display:block;
	}

	.c1 .el-image:hover {
		border-color: var(--el-color-primary);
	}

	.c2 {
		flex:1;
		p{text-align:right;width:60px;}
	}

	.c3 {
		padding: 5px;
	}

	.c4 {
		justify-content: space-between;
	}
</style>
